<template>
  <div class="index-wrap">
    {{ test }}
    <p>
      这个是store/index.js的状态树中的state:{{ $store.state.counter }}
      <span
        ><button @click="addCounter">我调用了store/index.js的方法</button></span
      >
    </p>
    <nuxt-link to="/Test">Test</nuxt-link>
    <div class="flex">
      <!-- 这里是动态路由 -->
      <div class="link-outside" v-for="item in routes" :key="item.path">
        <div>
          <nuxt-link class="link" :to="`/User/${item.path}`">{{
            item.name
          }}</nuxt-link>
        </div>
      </div>
    </div>
    <p>
      这个是store/test/index.js的状态树中的state:{{ $store.state.test.text }}
      <span
        ><button @click="changeTestValue">
          我调用了store/test/index.js的方法
        </button></span
      >
    </p>
    <p v-for="item in data" :key="item.id">
      <!-- NuxtLink相当于原生的a标签 -->
      <NuxtLink :to="{ path: `/Test`, query: { id: item.id } }">
        {{ item.consignor }}</NuxtLink
      >
    </p>
  </div>
</template>

<script>
// 获取环境变量
import env from '../env'
import { getLogisticsApi } from '../plugins/api'
export default {
  name: 'IndexPage',
  layout: 'model',
  data() {
    return {
      test: 'Hello Nuxt',
      title: '首页',
      data: [],
      routes: [
        { path: 'info', name: '消息' },
        { path: 'detail', name: '个人详情' },
      ],
    }
  },
  methods: {
    getEnv() {
      // 获取环境变量
      console.log(env[process.env.MODE].LOCAL_BASE_URL)
    },
    addCounter() {
      // 调用store/index.js中的方法
      this.$store.commit('increment')
    },
    changeTestValue() {
      // 调用store/test/index.js中的方法
      this.$store.commit('test/changeText')
    },
  },
  created() {
    this.getEnv()
  },
  // 数据要在这里获取才会才网页源码中有数据,可以对比这里获取和在methods写的方法获取接口数据进行对比(通过查看网页源代码)
  async asyncData() {
    const res = await getLogisticsApi()
    if (res.errCode != 0) {
      error({ statusCode: 404, message: 'request error' })
    }
    return { data: res.data }
  },
  mounted() {},
  // 配置头部meta
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'index',
          name: 'index',
          content: 'My custom description',
        },
      ],
    }
  },
}
</script>

<style lang="css" scoped>
.link-outside {
  padding: 0 10px;
}

.link {
  display: block;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  text-decoration: none;
  user-select: none;
  font-size: 24px;
  font-weight: 700;
}
.link:link,
.link:visited,
.link:hover,
.link:active {
  color: black;
}
</style>